<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10canvas绘图矩形</title>
  </head>
  <body>
    <!-- 1.设置canvas元素 -->
    <canvas id="canvas" width="200" height="200"></canvas>
    <script>
      // 2.获取canvas
      const canvas = document.getElementById('canvas')
      // 3,getContext()返回一个对象,对象包括绘制图形的方法和属性
      const ctx = canvas.getContext('2d')
      // 4.执行绘制fillRect(x,y,width,height) x,y
      ctx.fillStyle = '#333'

      ctx.fillRect(10, 50, 100, 200)
    </script>
  </body>
</html>
